<template>
	<view class="app">
		<view class="app-container text-center">
			<view class="flex flex-direction justify-center">
				<view class="bg-img"></view>
				<view class="text-xsl padding"><text class="cuIcon-roundcheckfill text-primary"></text></view>
				<text class="text-primary text-lg padding">已成功提交需求，大约需要人工审核5~10分钟，请耐心等待</text>
			</view>
			<view class="action">
				<navigator url="/pages/tabbar/community" open-type="switchTab"><button class="cu-btn back block box-shadow line-primary margin-tb-sm lg">返回</button></navigator>
				<button class="cu-btn block box-shadow bg-primary margin-tb-sm lg" @tap="payMethod">打赏一下（辛苦费）</button>
				<view class="card-wrap">
					<view class="item" v-for="(item, index) in prices" :key="index" :class="{ active: index === currentIndex }" @tap="selectTip(item, index)">
						<img :src="item.icon" alt="" />
						<view class="text-xl margin-top-xs">
							<text class="text-xs">￥</text>
							{{ item.price }}
						</view>
					</view>
					<view class="text">
						<text class="title">打赏骑手</text>
						<text class="dec">您的小费将直接转给骑手</text>
					</view>
				</view>
			</view>
		</view>
		<PaymentModal ref="PaymentModal" title="校验安全密码" v-model="payFlag" @confirm="confirmPassword"></PaymentModal>
	</view>
</template>

<script>
import PaymentModal from '@/components/payment-modal/password.vue';
import { paymentInterface } from '@/api/pay';
export default {
	name: 'reward',
	components: {
		PaymentModal
	},
	data() {
		return {
			payFlag: false,
			currentIndex: 0,
			prices: [
				{
					icon:
						'',
					price: '1.1'
				},
				{
					icon:
						'',
					price: '2.2'
				},
				{
					icon:
						'',
					price: '3.3'
				},
				{
					icon:
						'',
					price: '6.6'
				}
			],
			row: {},
			paymentMethod: null,
			order_number: '',
			order_id: ''
		};
	},
	onLoad(options) {
		this.order_number = options.order_number;
		this.order_id = options.order_id;
	},
	methods: {
		/**
		 * 选择消费
		 * @param {Object} item
		 */
		selectTip(item, index) {
			this.currentIndex = index;
		},
		/**
		 * 选择支付方式
		 */
		payMethod() {
			uni.showActionSheet({
				itemList: ['微信支付', '余额支付'],
				success: res => {
					this.paymentMethod = res.tapIndex === 0 ? 2 : 1;
					res.tapIndex === 0 && this.wechatPay();
					res.tapIndex === 1 && this.balancePay();
				}
			});
		},
		/**
		 * 有订单号时 微信支付
		 */
		wechatPay() {
			//第一步: 获取支付参数
			this.paymentInterfaceEvent().then(result => {
				//第二步：发起微信支付
				this.payEvent(result);
			});
		},
		/**
		 * 余额支付
		 */
		balancePay() {
			//验证密码
			this.payFlag = true;
		},
		/**
		 *  获取支付流水号
		 */
		paymentInterfaceEvent(password) {
			return new Promise(resolve => {
				paymentInterface({
					payType: this.paymentMethod,
					body: '小费',
					out_trade_no: this.order_number,
					order_id: this.order_id || '',
					payment_code: password || '',
					orderType: 3,
					tip: this.prices[this.currentIndex].price
				}).then(res => {
					resolve(res.result);
				});
			});
		},
		/**
		 * 调起微信支付
		 * @param result
		 */
		payEvent(result) {
			const { nonceStr, paySign, signType, timeStamp } = result;
			wx.requestPayment({
				nonceStr: nonceStr,
				package: result.package,
				paySign: paySign,
				signType: signType,
				timeStamp: timeStamp.toString(),
				success: res => {
					if (res.errMsg === 'requestPayment:ok') {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 6000
						});
						uni.switchTab({
							url: '/pages/tabbar/community'
						});
					}
				},
				fail: res => {
					if (res.errMsg !== 'requestPayment:fail cancel') {
						uni.showModal({
							title: '支付错误',
							content: '可能遇到网络堵塞，建议重新尝试提交预约'
						});
					}
				}
			});
		},
		/**
		 * 输入密码后确认事件
		 * @param {Object} value 密码
		 */
		confirmPassword(value) {
			//支付
			this.paymentInterfaceEvent(value).then(res => {
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 6000
				});
				this.$refs.PaymentModal.hideModal();
				uni.switchTab({
					url: '/pages/tabbar/community'
				});
			});
		}
	}
};
</script>

<style scoped lang="scss">
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}

.app-container {
	height: 100%;
	position: relative;

	.card-wrap {
		width: 100%;
		.item {
			height: 90px;
			width: 23%;
			padding: 10px;
			display: inline-block;
			vertical-align: top;
			background: #a5c3f730;
			margin: 1%;
			border-radius: 5px;
			color: #172575;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.active {
			border: solid 1px #a5c3f7;
		}
		.text {
			display: flex;
			justify-content: space-between;
			margin: 1%;

			.title {
				font-size: 12px;
				text-align: left;
				color: #172575;
			}
			.dec {
				font-size: 12px;
				text-align: right;
				color: #c1c1c1;
			}
		}
	}

	.action {
		bottom: 36px;
		left: 16px;
		right: 16px;
		position: absolute;
		height: 50%;

		.back {
			background: #fff !important;
		}
	}
}
</style>
